<template>
	<view class="custom-swiper-container">
		<!-- <swiper :indicator-dots="true" style="height: 400upx;" :autoplay="true" :indicator-active-color="activeColor" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in dataList" :key="index">
				<view class="swiper-item" style="position: relative;">
					<image :src="item.thumb" lazy-load style="height: 400upx;width: 750upx;"></image>
					<text class="swiper-item-title">{{item.title}}</text>
				</view>
			</swiper-item>
		</swiper> -->
		<uni-swiper-dot :info="dataList" :dotsStyles="dotsStyles" :current="current" mode="rectangle" style="height: 400upx;">
		    <swiper class="swiper-box" @change="change" style="height: 400upx;">
		        <swiper-item v-for="(item ,index) in dataList" :key="index" @click="skipToNewsDetail(item)">
		            <view class="swiper-item" style="position: relative;">
		            	<image :src="item.thumb" lazy-load style="height: 400upx;width: 750upx;"></image>
						<view class="line">
							<text class="swiper-item-title">{{item.title}}</text>
						</view>
		            </view>
		        </swiper-item>
		    </swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
import uniSwiperDot from "@/components/uni-ui/uni-swiper-dot/uni-swiper-dot.vue"
export default {
	data() {
		return {
			activeColor:'#FFFFFF',
			current: 0,
			dotsStyles:{
				// width: 4,
				selectedBackgroundColor: '#FFFFFF',
				selectedBorder: '1px solid #ffffff',
				bottom: 5,
				backgroundColor:'rgba(255,255,255,0.5)',
				border:'#FFFFFF'
			}
		};
	},
	components:{
		uniSwiperDot
	},
	props: {
		dataList: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	methods:{
		change(e){
			this.current = e.detail.current;
		},
		skipToNewsDetail(obj){
			const newsId = obj.contentId;
			const url = obj.url;
			uni.navigateTo({
				url:'/pages/index/news-detail/news-detail?id=' + newsId + '&link=' + url
			})
			//加入历史记录
			let list = uni.getStorageSync('history')
			list = list ? JSON.parse(list) : [];
			let index = list.findIndex(v=>v.contentId === newsId)
			if(index === -1){
				 list.unshift(obj);
			     uni.setStorageSync('history',JSON.stringify(list))
			}else{
				for (var i = 0; i < list.length; i++) {
				            if (list[i].contentId === newsId) {
				                list.splice(i, 1); // 如果数据组存在该元素，则把该元素删除
				                break;
				            }
					}
				list.unshift(obj);
				uni.setStorageSync('history',JSON.stringify(list))
			}
			
		}
	}
};
</script>

<style>
.swiper-item-title {
	/* position: absolute; */
	color: #ffffff;
	font-size: 36upx;
	left: 28upx;
	bottom: 60upx;
	line-height: 50upx;
}
wx-swiper .wx-swiper-dots-horizontal {
    right: 15px!important;
	left: auto!important;
}
wx-swiper .wx-swiper-dot{
	width: 4upx;
	height: 4upx;
}
.line{
	position: absolute;
	padding: 20upx 28upx 60upx;
	width: 714upx;
	background: linear-gradient(to bottom,rgba(19, 19, 19, 0.1),rgba(9, 9, 9, 0.4), rgba(0, 0, 0, 1)); 
	bottom: 0;
}
/deep/ .uni-swiper-dots-horizontal {
    right: 15px!important;
	left: auto!important;
}
/deep/ .uni-swiper-dots-horizontal .uni-swiper-dot{
	margin-right: 8upx;
}
/deep/ .uni-swiper-dot{
	width: 8upx;
	height: 8upx;
}
</style>
